<template>
  <div>
    <span style="margin: 0 10px 0 5%">Switch Type:</span>
    <el-tooltip :content="'Current Type: ' + flag ? 'course' : 'classify'" placement="top">
      <el-switch v-model="flag" active-color="#13ce66" inactive-color="#ff4949" @change="handleChange" />
    </el-tooltip>
    <span style="margin: 0 10px 0 5%">Select Value:</span>
    <el-select v-model="value" clearable placeholder="Choose">
      <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.uid" />
    </el-select>
    <span style="margin: 0 10px 0 20%" />
    <el-button type="success" icon="el-icon-reading" @click="handleNew">New</el-button>
  </div>
</template>

<script>
export default {
  name: 'SetTool',
  props: {
    type: {
      type: Boolean,
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    selected: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      flag: this.type,
      value: this.selected
    }
  },
  watch: {
    flag: {
      handler(newVal) {
        this.$emit('update:type', newVal)
      }
    },
    value: {
      immediate: true,
      handler(newVal) {
        this.$emit('update:selected', newVal)
      }
    },
    options: {
      handler(newVal) {
        this.options = newVal
      }
    }
  },
  methods: {
    handleChange() {
      this.$emit('change', this.flag)
    },
    handleNew() {
      this.$emit('new')
    }
  }
}
</script>

<style scoped>

</style>
